<template>
  <el-collapse-item name="stationLog" class="station-log">
    <div class="top" slot="title">
      <PartitionTitle title="工位交接日志" type="line"></PartitionTitle>
    </div>
    <div class="content">
      <div
        class="item"
        v-for="station in stationList"
        :key="station.id"
        @click="handleLog(station)"
      >
        <img
          src="@/assets/images/shift/workStationLog.png"
          alt=""
          srcset=""
        />
        <div>{{ station.workStationDto.workStationName }}</div>
      </div>
    </div>
    <StationLogDialog
      :visible.sync="dialogVisible"
      :currentStation="currentStation"
      :readonly="true"
    ></StationLogDialog>
  </el-collapse-item>
</template>
<script>
import StationLogDialog from "./stationLogDialog.vue";
import { getWorkLogVoByProduceLogId } from "@/api/shifts/shiftHandover";
import { mapState } from "vuex";
export default {
  components: { StationLogDialog },
  props: {
    // 表单状态，控制不同情况下 表单呈现的效果，1-接班，2-交班，3-历史查看
    status: {
      type: String,
      default: "1",
    },
    detailKey: {
      type: String,
      default: "handoverDetail",
    },
  },
  data() {
    return {
      stationList: [],
      dialogVisible: false,
      currentStation: null,
    };
  },
  computed: {
    ...mapState({
      handoverDetail: (state) => state.turnOnDuty.handoverDetail,
    }),
    detailsData() {
      return this[this.detailKey];
    },
  },
  methods: {
    getWorkLog() {
      const produceLogId = this.detailsData?.produceLogId;
      if (!produceLogId) {
        return;
      }
      getWorkLogVoByProduceLogId(produceLogId)
        .then((res) => {
          this.stationList = res?.data || [];
        })
        .catch(() => {
          this.stationList = [];
        });
    },
    handleLog(item) {
      this.dialogVisible = true;
      this.currentStation = { ...item };
    },
  },
  watch: {
    detailsData: {
      handler(newVal) {
        if (newVal) {
          this.getWorkLog();
        }
      },
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.station-log {
  .content {
    overflow: hidden;
    .item {
      width: 100px;
      float: left;
      margin-right: 16px;
      margin-bottom: 16px;
      text-align: center;
      cursor: pointer;
      img {
        width: 100%;
      }
    }
  }
}
.top {
  margin: 20px 0 10px;
  .block-title {
    margin-bottom: 0;
  }
}
</style>
